<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom + bottomBtnHeight)+'px'}">
		<navbar title="发布岗位"></navbar>
		<view class="form" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<uni-forms :modelValue="formData" label-position="top" :rules="rules" ref="customForm">
				<uni-forms-item label="职位名称" name="title">
					<uni-easyinput type="text" v-model="formData.title" class="shadow"
						placeholder="请填写职位名称" />
				</uni-forms-item>
				<uni-forms-item label="岗位类别" name="hangye">
					<view class="form-select" @click="pickerOpen('hangye')">
						<uni-easyinput type="text" v-model="formData.hangye" class="shadow"
							placeholder="请选择" disabled />
						<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="岗位标签" name="gangwei">
					<view class="form-select" @click="pickerOpen('gangwei')">
						<uni-easyinput type="text" v-model="formData.gangwei" class="shadow" disabled
							placeholder="请选择" />
						<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="岗位要求" name="need">
					<uni-easyinput type="textarea" v-model="formData.need" maxlength="500" class="shadow" placeholder='如：请输入岗位要求，500字以内' />
				</uni-forms-item>
				<uni-forms-item label="工作内容" name="workCnt">
					<uni-easyinput type="textarea" v-model="formData.workCnt" maxlength="500" class="shadow" placeholder='如：请输入工作内容，500字以内' />
				</uni-forms-item>
				<uni-forms-item label="工作形式" name="workType">
					<view class="form-select" @click="pickerOpen('workType')">
						<uni-easyinput type="text" v-model="formData.workType" class="shadow" disabled
							placeholder="请选择" />
						<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="学历要求" name="workEducation">
					<view class="form-select" @click="pickerOpen('workEducation')"> 
						<uni-easyinput type="text" v-model="formData.workEducation" class="shadow" disabled
							placeholder="请选择" />
						<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="工作时间" name="workTime">
					<view class="form-select" @click="pickerOpen('workTime')">
						<uni-easyinput type="text" v-model="formData.workTime" class="shadow" disabled
							placeholder="请选择" />
						<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="工作经验" name="workExperience">
					<view class="form-select" @click="pickerOpen('workExperience')">
						<uni-easyinput type="text" v-model="formData.workExperience" class="shadow" disabled
							placeholder="请选择" />
						<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="截止时间" name="timeEnd">
					<view class="form-line">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.timeEnd" class="shadow"
							@maskClick="maskClick" placeholder="请选择截止时间" :start="new Date().getTime()" />
						<uni-data-checkbox v-model="formData.isLong" style="margin-left: 10upx;" multiple
							:localdata="longList" @change="timeChange"></uni-data-checkbox>
					</view>
				</uni-forms-item>
				<uni-forms-item label="日薪" name="workSalary">
					<view class="form-line">
						<uni-easyinput type="number" v-model="formData.workSalary" :disabled="formData.isMianyi.length>0"
							class="shadow workSalary" placeholder="请输入日薪"/>
						<uni-data-checkbox v-model="formData.isMianyi" multiple style="margin-left: 10upx;"
							:localdata="salaryList" class="shadow" @change="salaryChange"></uni-data-checkbox>
					</view>
				</uni-forms-item>
				<uni-forms-item label="工作地址" :name="form.city? 'addr':'city'">
					<view class="form-select br" @click="cityClick">
						<uni-easyinput type="text" :value="getArea()" class="shadow" disabled
							placeholder="请选择" />
						<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
					</view>
					<uni-easyinput type="text" v-model="formData.addr" class="shadow" placeholder="填写详细地址" />
				</uni-forms-item>
				<!-- <uni-forms-item label="带教服务" name="daijiaoCompany">
					<view class="form-select" @click="pickerOpen('daijiaoCompany')">
						<uni-easyinput type="text" v-model="daijiaoCompany" class="shadow" disabled
							placeholder="请选择" />
						<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
					</view>
				</uni-forms-item> -->
				<uni-forms-item label="其他" name="tip">
					<uni-data-checkbox v-model="formData.tip" multiple :localdata="descList"></uni-data-checkbox>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="form-tip">
			提示：默认保留2个月，时间到后需要重新发布
		</view>
		<view class="main-button" :style="{paddingBottom:getSafeBottom+'px'}">
			<view class="main-button-save" @click="submit(3)">
				存草稿
			</view>
			<view class="main-button-submit" @click="submit(1)">
				确认提交审核
			</view>
		</view>
		<view class="main-bj">

		</view>
		<picker-view :list="columns" @confirm="onConfirm" ref="pickerRef"></picker-view>
		<!-- 地址Select -->
		<van-popup position="bottom" :show="areaShowPicker">
			<van-area :areaList="areaList" @confirm="selectQydz" @cancel="onCelcel('area')" />
		</van-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import {
		mapState
	} from "vuex";
	import {
		getData
	} from '@/core/web-api/common';
	import PickerView from '@/components/PickerView.vue';
	import {
		areaList
	} from '@/node_k/area-data/areadata.js';
	import {zhaopinSave,getPostDetailToMine,updatePost} from "@/core/web-api/qiyeduan.js"
	export default {
		components: {
			Navbar,
			PickerView
		},
		data() {
			return {
				formData: {
					addr: "", //详细地址			
					city: "", //城市/区域			
					daijiaoCompany: "", //带教企业名称			
					gangwei: "", //意向岗位			
					hangye: "", //所属行业			
					isDaijiao: "", //是否提供带教服务			
					isLong: [], //1长期默认0			
					isMianyi: [], //1薪资面议默认0			
					need: "", //职位要求			
					province: "", //省份			
					timeEnd: "", //截止时间			
					tip: [], //标签			
					title: "", //职位名称			
					workCnt: "", //工作内容			
					workDanwei: "", //工作薪资单位	
					workEducation: "", //学历要求
					workExperience: "", //工作经验			
					workSalary: "", //
					workTime: "", //工作时间			
					workType: "", //工作形式
					id:null,
				},
				bottomBtnHeight: uni.upx2px(140),
				rules: {

				},
				columns: [],
				longList: [{
					value: 1,
					text: "长期"
				}],
				salaryList: [{
					value: 1,
					text: "面议"
				}],
				descList: [{
						value: "转正机会",
						text: "转正机会"
					},
					{
						value: "实习证明",
						text: "实习证明"
					},
					{
						value: "购买保险",
						text: "购买保险"
					},
					{
						value: "带教服务",
						text: "带教服务"
					}
				],
				optionsMap: {
					hangyeColumns: [],
					workTypeColumns: [],
					workEducationColumns: [],
					workTimeColumns: [],
					workExperienceColumns: [],
					gangweiColumns: [],
					daijiaoCompanyColumns: []
				},
				type: "",
				areaShowPicker: false,
				areaList: areaList,
				id:"",
			}
		},
		methods: {
			timeChange(e){
				if(e.detail.value.length>0){
					this.formData.timeEnd = "";
				}
			},
			salaryChange(e){
				if(e.detail.value.length>0){
					this.formData.workSalary = ''
				}
			},
			submit(status) {
				
				let dist = JSON.parse(JSON.stringify(this.formData));
				if(dist['isMianyi'].length>0){
					this.rules.workSalary.rules[0].required = false
				}else{
					this.rules.workSalary.rules[0].required = true
				}
				
				if(status!=3){
					this.$refs.customForm.validate().then(res => {
						dist['isLong'] = dist['isLong'].length>0? "1":"0";
						dist['isMianyi'] = dist['isMianyi'].length>0? "1":"0";
						dist['isDaijiao'] = "0";
						dist['timeEnd'] = dist['timeEnd']? dist['timeEnd'] + " 23:59:59":""
						dist['status'] = status
						if(dist.tip.includes('带教服务')){
							dist.isDaijiao = '1'
							dist.tip = dist.tip.filter(item=>item!='带教服务')
						}
						dist.tip = dist.tip.join(",");
						this.id? this.update(dist):this.save(dist);
					}).catch(err => {
						console.log('err', err);
					})
				}else{
					dist['isLong'] = dist['isLong'].length>0? "1":"0";
					dist['isMianyi'] = dist['isMianyi'].length>0? "1":"0";
					dist['isDaijiao'] = "0";
					dist['timeEnd'] = dist['timeEnd']? dist['timeEnd'] + " 23:59:59":""
					dist['status'] = status
					if(dist.tip.includes('带教服务')){
						dist.isDaijiao = '1'
						dist.tip = dist.tip.filter(item=>item!='带教服务')
					}
					dist.tip = dist.tip.join(",");
					this.id? this.update(dist):this.save(dist);
				}
			},
			
			/**
			 * 新增
			 * @param {Object} data
			 */
			save(data){
				zhaopinSave(data).then(res=>{
					if(res.code==20000){
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}
					uni.showToast({
						title:res.message,
						icon:"none",
						duration:1500
					})
				})
			},
			
			/**
			 * 编辑
			 */
			update(data){
				updatePost(data).then(res=>{
					if(res.code==20000){
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}
					uni.showToast({
						title:res.message,
						icon:"none",
						duration:1500
					})
				})
			},
			
			/**
			 * 关闭省市区
			 */
			onCelcel() {
				this.areaShowPicker = false;
			},
			/**
			 * 选择省市区打开
			 */
			cityClick() {
				this.areaShowPicker = true;
			},
			selectQydz({
				values
			}) {
				this.formData.province = values[0].name;
				this.formData.city = values[0].name + "/" +values[1].name + "/" + values[2].name;
				this.areaShowPicker = false;
			},

			/**
			 * 弹窗显示
			 */
			pickerOpen(type) {
				this.type = type;
				this.columns = this.optionsMap[type + 'Columns'];
				this.$refs.pickerRef.open();
			},

			/**
			 * 选择
			 */
			onConfirm() {
				let value = this.$refs.pickerRef.value;
				this.formData[this.type] = value;
				console.log(this.formData[this.type])
				if (this.type == 'hangye') {
					this.optionsMap.gangweiColumns = this.optionsMap[this.type + "Columns"].find(f => f.sort == value)
						.datasetTreeVos
				}
			},

			/**
			 * 加载下拉数据
			 */
			getCataList() {
				let nameList = ['所属行业', '工作方式', '学历', '工作时间', '工作经验'];
				let cataList = ['hangyeColumns', 'workTypeColumns', 'workEducationColumns', 'workTimeColumns',
					'workExperienceColumns'
				];
				getData({
					sortList: nameList
				}).then(res => {
					if (res.code == 20000) {
						let list = res.data.list;
						list.forEach(item => {
							let index = nameList.findIndex(f => f == item.sort);
							this.optionsMap[cataList[index]] = item.list;
						})
					}
				})
			},

			/**
			 * 生成表单校验规则
			 */
			getRules() {
				const dist = {
					title: "职位名称",
					hangye: "岗位类别",
					gangwei: "岗位标签",
					need: "岗位要求",
					workCnt: "工作内容",
					workType: "工作形式",
					workEducation: "学历要求",
					workTime: "工作时间",
					workExperience: "工作经验",
					city:"工作区域",
					addr:"详细地址",
					workSalary:"日薪"
				}
				
				let rules = {};
				for (let key in dist) {
					rules[key] = {
						rules: [{
							required: true,
							errorMessage: dist[key] + "不能为空"
						}]
					}
				}
				this.rules = rules;
			},
			getDetail(){
				getPostDetailToMine({id:this.id}).then(res=>{
					if(res.code==20000){
						let {detail} = res.data;
						detail.isMianyi = detail.isMianyi=='1'? [1]:[];
						detail.tip = detail.tip? detail.tip.split(","):[];
						detail.isLong = detail.isLong=='1'? [1]:[]
						if(detail.isDaijiao=='1'){
							detail.tip.push('带教服务');
						}
						detail.timeEnd = detail.timeEnd? detail.timeEnd.split(" ")[0]:"";
						for(let key in this.formData){
							this.formData[key] = detail[key]
						}
						this.formData.id = this.id
						if(this.formData.hangye){
							let index = this.optionsMap.hangyeColumns.findIndex(f => f.sort == this.formData.hangye);
							this.optionsMap.gangweiColumns = this.optionsMap.hangyeColumns[index].datasetTreeVos;
						}
					}
				})
			}
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState([]),
			getArea() {
				return function() {
					if (this.formData.city == "") return "请选择";
					return this.formData.city
				}
			}
		},
		onReady() {
			this.$refs.customForm.setRules(this.rules)
		},
		created() {
			this.getRules();
			this.getCataList();
		},
		onLoad(options) {
			if(!options.id) return;
			this.id = options.id;
			this.getDetail()
		}
	}
</script>

<style scoped lang="less">
	.br {
		margin-bottom: 20upx;
	}

	.main {
		width: 100%;
		padding: 0 65upx;
		box-sizing: border-box;

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}

		&-button {
			width: 100%;
			position: fixed;
			background-color: #f5f5f5;
			left: 0;
			bottom: 0;
			padding-top: 10upx;
			z-index: 10;
			padding: 0 70upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 10upx;

			view {
				height: 80upx;
				text-align: center;
				line-height: 80upx;
				border-radius: 10upx;
				font-size: 30upx;
			}

			&-submit {
				width: 457upx;
				background: linear-gradient(to bottom, #5472fd, #6ca5fd);
				color: #ffffff;
				margin-left: 15upx;
			}

			&-save {
				width: 128upx;
				background-color: #fff;
				border: 1upx solid #f0f0f0;
				box-sizing: border-box;
				color: #666666;
				font-size: 30upx;
			}
		}
	}

	.form {
		width: 100%;

		&-select {
			position: relative;

			&-icon{
				position: absolute;
				right: 20upx;
				height: 60upx;
				display: flex;
				align-items: center;
				top: 0;
			}
		}

		&-line {
			display: flex;
			align-items: center;
		}

		&-tip {
			font-size: 30upx;
			color: #000;
			width: 100%;
			text-align: center;
		}

		/deep/ .uni-easyinput__content:not(.is-textarea) {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
		}
		
		

		/deep/ .uni-easyinput {
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
		}

		/deep/ .uni-select {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
		}

		/deep/ .uni-forms-item__label {
			padding-bottom: 25upx;

			text {
				font-size: 30upx;
				color: #000;
			}

		}

		/deep/ .uni-date__x-input {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
			line-height: 60upx !important;
			margin-left: 10upx;
		}

		/deep/ .input-value {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
			line-height: 60upx !important;
		}

		/deep/ .checklist-box {
			&:last-child {
				margin-right: 0;
			}
		}
	}
	.workSalary{
		/deep/ .uni-easyinput__content.is-disabled {
			color: #808080 !important; /* 灰色文字 */
			background-color: #f0f0f0 !important; /* 灰色背景，如果需要的话 */
			/* 注意：如果uni-easyinput有特定的禁用状态样式类，可能需要覆盖该类 */
		}
	}
</style>